<template>
  <el-scrollbar height="calc(100vh - 180px)">
    <div class="tableBox">
      <div class="boxfac">
        <div class="factitle">设施</div>
        <div class="facmain flex">
          <div class="cardbox">
            <el-card>
              <div>名称：{{ store.state.facilitieName || "---" }}</div>
              <div>位置：---</div>
            </el-card>
          </div>
          <div class="cardbox">
            <el-card>
              <div>联系人：{{ state.proMsg[0]?.p?.Mechanic || "---" }}</div>
              <div>电话：{{ state.proMsg[0]?.p?.Telephone || "---" }}</div>
            </el-card>
          </div>
          <div class="cardbox">
            <el-card>
              <div>
                作物种类：{{ state.proMsg[0]?.p?.CropVarieties || "---" }}
              </div>
              <div>
                开始时间：{{
                  formatDateTimes(state.proMsg[0]?.create_time) || "---"
                }}
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="boxfac">
        <div class="factitle">监测</div>
        <div class="facmain flex" v-show="state.installationArr.length > 0">
          <div
            class="facMainUl ml10"
            v-for="item in state.installationArr"
            :key="item.id"
          >
            <el-card>
              <div @click="showEcharts(item)">
                <div class="facLi">
                  <img :src="item?.logo" alt="" class="facImg" />
                </div>
                <div class="facLiTxt">
                  {{ item?.name }}：{{ item?.monitorData?.data?.toFixed(2) }}
                  {{ item?.monitorData?.unitname }}
                </div>
                <div class="facLiTxt">
                  时间：{{ formatDateTimes(item?.monitorData?.ctime) }}
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div v-show="!state.installationArr.length">
          <no-data />
        </div>
      </div>
      <div class="boxfac">
        <div class="factitle">控制设备</div>
        <div class="facMain flex" v-show="state.ControlArr.length > 0">
          <div
            class="facMainUl mr10"
            v-for="item in state.ControlArr"
            :key="item?.id"
          >
            <el-card>
              <div class="facMainConBox">
                <img :src="item?.logo" alt="" class="facImg facImgwh" />
                <div>
                  <div class="facLiTxt">名称：{{ item?.name }}</div>
                  <div class="facLiTxt">
                    时间：{{ formatDateTimes(item?.monitorData.utime) }}
                  </div>
                  <div class="facLiTxt">
                    状态：{{ item?.monitorData.dataTitle }}
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div v-show="!state.ControlArr.length">
          <no-data />
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { watch, computed, reactive } from "vue";
import {
  $getCamera,
  $getSensor,
  $getControl,
  $getCurrentPlantingPlan,
} from "../../utils/api";
import store from "../../store/index";
import { formatDateTimes } from "../../utils/index";
import noData from "../../components/noData.vue";
const state = reactive({
  proMsg: [],
  installationArr: [],
  ControlArr: [], // 控制
});
// 获取检测
const getSensor = async () => {
  const res = await $getSensor({
    facilities_id: store.state.facilities,
  });
  console.log(res);
  state.installationArr = res.results;
};
// 获取联系人及电话
const getCurrentPlantingPlan = async () => {
  const res = await $getCurrentPlantingPlan({
    facilities_id: store.state.facilities,
    pageIndex: 1,
    pageSize: 10,
  });
  state.proMsg = res.results;
};
//设备
const getControl = async () => {
  const res = await $getControl({
    facilities_id: store.state.facilities,
  });
  console.log(res);
  state.ControlArr = res.results;
};

watch(
  computed(() => store.state.facilities),
  (e) => {
    store.state.facilities = e;
    getCurrentPlantingPlan();
    getSensor();
    getControl();
  }
);
</script>

<style lang="scss" scoped>
.tableBox {
  .boxfac {
    .factitle {
      padding: 10px 0;
      color: rgb(82, 82, 153);
      margin-left: 10px;
    }
    .factitle::before {
      content: "";
      display: block;
      width: 2px;
      height: 20px;
      background-color: rgb(82, 82, 153);
      position: relative;
      top: 20px;
      left: -10px;
    }
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    .cardbox {
      width: 200px;
      margin-right: 5px;
      margin-top: 5px;
    }
  }
}
.tableBox :last-child {
  border-bottom: none;
}
</style>
